<template>
	<view>
		<view class="head_con" style="" @click="toback">
			<u-icon name="arrow-left" color="#fff" label="房屋租赁" labelColor="#fff" space="6">
			</u-icon>
		</view>
		<view>
			<!-- <view class="u-search-box">
				<view class="u-search-inner">
					<u-icon name="search" color="#909399" :size="28"></u-icon>
					<text class="u-search-text">您想住哪儿</text>
				</view>
			</view> -->
			
			<view style="padding: 20rpx 20rpx 0;">
				<image style="width:100%;" src="https://resourse.cnlhjt.com/upload/20221226/71ddbebf5b7c3cdeedfb9376ebba8c3a.png" mode="widthFix"></image>
				<!-- <u-swiper border-radius="50" height="320rpx" img-mode="heightfill" @click="intoBanner" indicator indicatorMode="dot" :list="bannerList" keyName="image">
				</u-swiper> -->
			</view>
			<view style="margin: 20rpx;">
				<u-grid col="4">
					<u-grid-item v-for="(item,index) in navList" :key="index" v-if="index<4" @click="gotoList(index+1)">
						<u-icon width="80rpx" height="80rpx" :name="item.icon">
						</u-icon>
						<view class="grid-v" style="font-size: 28rpx;color:#333;margin-top:15rpx;">
							{{item.name}}
						</view>
					</u-grid-item>
				</u-grid>
			</view>
			
			<view>
				<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
				</u-empty>
				<view class="house_list" v-for="(item,index) in houselist" :key="index" @click="todetail(item.id)">
					<image class="house_img" :src="item.images_[0]" mode="aspectFill"></image>
					<view class="house_right_con">
						<view class="overflow">{{item.rent_type_label}} | {{item.title}}</view>
						<view class="second_con">
							{{item.area}}㎡ · {{item.arrow_type_label}} · {{item.address}}
						</view>
						<view class="house_label">
							<text>{{item.rent_type_label}}</text>
							<text>{{item.renovation_type_label}}</text>
							<text>{{item.arrow_type_label}}</text>
						</view>
						<view class="house_price">
							<text style="font-size: 32rpx;font-weight: bold;">{{item.price}}</text>元/月
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
			:direction="direction" @trigger="trigger" @fabClick="fabClick" />
	</view>
</template>

<script>
	import {
		getBanner
	} from "@/service/configService.js";
	import {
		rentList
	} from "@/service/rentService.js";
	export default {
		data() {
			return {
				directionStr: '垂直',
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'vertical',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: '#0B868E',
					iconColor: '#fff'
				},
				is_color_type: false,
				content: [{
						iconPath: 'https://resourse.cnlhjt.com/upload/20220825/297a6c922f01bffbf8003dcd71876a3e.png',
						selectedIconPath: 'https://resourse.cnlhjt.com/upload/20220825/297a6c922f01bffbf8003dcd71876a3e.png',
						text: '发布',
						active: false
					},
					{
						iconPath: 'https://resourse.cnlhjt.com/upload/20220825/9745420910da6baf1946a0e7c3c069b1.png',
						selectedIconPath: 'https://resourse.cnlhjt.com/upload/20220825/9745420910da6baf1946a0e7c3c069b1.png',
						text: '我的发布',
						active: false
					}
				],
				bannerList: [],
				navList:[
					{
						icon:'https://resourse.cnlhjt.com/upload/20221226/3676b6707f970827b6b5b24439c11938.png',
						name:'整租'
					},
					{
						icon:'https://resourse.cnlhjt.com/upload/20221226/6b7fcb3ca7838086076f3c6e94eb9307.png',
						name:'合租'
					},
					{
						icon:'https://resourse.cnlhjt.com/upload/20221226/0f208668ab5d2c324ab0521263ccfefd.png',
						name:'安心选'
					},
					{
						icon:'https://resourse.cnlhjt.com/upload/20221226/df99672044e42601602fa6371c2b42c3.png',
						name:'精装修'
					}
				],
				showEmpty:false,
				page: 1,
				limit: 10,
				houselist:[]
			}
		},
		watch:{
			//监听reFresh,如果有修改就执行监听器
				reFresh: function() {
					this.houselist=[];
			        //调接口刷新数据
					rentList({
						type:0,
						page: 1,
						limit: 10
					}).then(this.rentList);
				}
		},
		onReachBottom() {
			rentList({
				type:0,
				page: this.page,
				limit: this.limit
			}).then(res=>{
				if(res.code==200){
					if(res.result.length==0){
						this.$refs.uToast.show({
							type: 'error',
							title: '没有更多啦',
							icon:false
							// message: e.msg,
						})
					}else{
						let list = res.result;
						list.forEach((item) => {
							this.houselist.push(item);
						})
						this.page++;
					}
					
				}else {
					this.$refs.uToast.show({
						type: 'error',
						title: '没有更多啦',
						icon:false
					})
				}
			});
		},
		mounted() {
			getBanner({
				type: 2
			}).then(this.banner);
			rentList({
				type:0,
				limit:10,
				page:1
			}).then(this.rentList)
		},
		methods: {
			rentList(e){
				if (e.code == 200) {
					this.houselist = e.result;
					if(e.result.length==0){
						this.showEmpty = true;
					}else{
						this.showEmpty = false;
					}
				} else {
					this.showEmpty = true;
					this.houselist = [];
				}
			},
			toback(){
				uni.navigateBack()
			},
			banner(e) {
				if (e.code == 200) {
					this.bannerList = e.result;
				}
			},
			gotoList(i){
				this.$u.route({
					url: '/pagesHome/houseRent/houseList',
					params: {
						i:i
					}
				});
			},
			todetail(id){
				this.$u.route({
					url: '/pagesHome/houseRent/houseDetail',
					params: {
						id:id
					}
				});
			},
			trigger(e) {
				// console.log(e);
				if (e.index == 0) {
					this.$u.route({
						url: "/pagesHome/houseRent/releasehouse",
						params: {}
					})
				} else if (e.index == 1) {
					this.$u.route({
						url: "/pagesHome/houseRent/myhouse",
						params: {}
					})
				} 
			},
			fabClick() {
				console.log(1);
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	.head_con{
		padding-top:95rpx;padding-left:20rpx;padding-bottom:35rpx;
		background-image: linear-gradient(to right, #00828a, #4aa6ac);
	}
	.u-search-box {
		padding: 18rpx 30rpx;
	}

	.u-search-inner {
		background-color: #fff;
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
		margin-bottom:15rpx;
	}

	.u-search-text {
		font-size: 26rpx;
		color: $u-tips-color;
		margin-left: 10rpx;
	}
	
	.house_list{
		padding:20rpx;
		display: flex;
		border-top:1rpx solid #ddd;
		.house_img{
			width:30%;
			height:190rpx;
			margin-right:20rpx;
			border-radius: 15rpx;
		}
		.house_right_con{
			position: relative;
			width:67%;
			.second_con{
				margin:10rpx 0;
				font-size: 22rpx;
			}
			.house_label text{
				display: inline-block;
				font-size: 22rpx;
				color:#666;
				padding:3rpx 8rpx;
				border:1rpx solid #999;
				border-radius: 8rpx;
				margin-right:10rpx;
			}
			.house_label text:first-child{
				color:#fff;
				background-image: linear-gradient(to right,#5baeb4,#07858d);
				border:1rpx solid transparent;
			}
			.house_price{
				position: absolute;
				bottom:0;
				color:red;
				font-size: 24rpx;
			}
		}
	}
</style>
